<!DOCTYPE html>
<html>
	<head>
		<script src="../../../../codebase/webix.js" type="text/javascript"></script>
		<link rel="stylesheet" type="text/css" href="../../../../codebase/webix.css">

		<title>Grid Suggest::Editor</title>
	</head>
	<body>

	<script type="text/javascript" charset="utf-8">
	webix.ready(function(){	

		var options1 = [
			{id:1, value:"The Shawshank Redemption", year:1994}, 
			{id:2, value:"The Godfather", year:1972},
			{id:3, value:"The Godfather: Part II", year:1974}, 
			{id:4, value:"The Good, the Bad and the Ugly", year:1966},
			{id:5, value:"My Fair Lady", year:1964}, 
			{id:6, value:"12 Angry Men", year: 1957}
		];

		var options2 = [
			{id:1, value:1994, votes:678790}, 
			{id:2, value:1972, votes:511495},
			{id:3, value:1974, votes:319352}, 
			{id:4, value:1966, votes:319352},
			{id:5, value:1964, votes:213030}, 
			{id:6, value:1957, votes:164558}
		];

		var data = [
			{ id:1, title:1, year:1, votes:678790, rating:9.2, rank:1},
			{ id:2, title:2, year:2, votes:511495, rating:9.2, rank:2},
			{ id:3, title:3, year:3, votes:319352, rating:9.0, rank:3},
			{ id:4, title:4, year:4, votes:213030, rating:8.9, rank:4},
			{ id:5, title:5, year:5, votes:533848, rating:8.9, rank:5},
			{ id:6, title:6, year:6, votes:164558, rating:8.9, rank:6}
		];

		var popup1 = webix.ui({
			view:"gridsuggest",
			body:{
				columns:[
					{id:"value", header:"Value", width:250},
					{id:"year", header:"Year", width:100}
				]
			}
			
		});

		var popup2 = webix.ui({
			view:"gridsuggest",
		});

		webix.ui({ 
			padding:20,
			rows:[
				{template:'Use <b>richselect</b> editor for "Films" and <b>combo</b> editor for "Years"', height:40, borderless:true},
				{margin:10, cols:[
					{view:"datatable", columns:[
						{ id:"id", header:"", width:50},
						{ id:"title", header:"Title",  editor:"richselect", collection:options1, popup:popup1, width:250,},
						{ id:"year", header:"Year", editor:"combo", collection:options2, popup:popup2, width:100},
						{ id:"votes", header:"Votes", width:100}
					],
					autoheight:true,
					autowidth:true,
					editable:true,
					data:data
				}
			]}]
		});

	});
	</script>
	</body>
</html>